<template>
  <div class="smart-bracelet flex flex-column">
    <radio-group v-model="tab" :data-list="radioList" class="flex-fixed" />
    <component :is="components[tab]" v-bind="$attrs" class="flex-auto-height" />
  </div>
</template>

<script>
import RadioGroup from '@gis/lib/components/radio-button-group.vue';
import LocationTable from '../smart-bracelet/location-table.vue';
import HeartrateTable from '../smart-bracelet/heartrate-table.vue';
import BloodpressureTable from '../smart-bracelet/bloodpressure-table.vue';
export default {
  name: 'smart-bracelet',
  components: { RadioGroup },
  data() {
    return {
      tab: '1',
      radioList: [
        { label: '轨迹', value: '1' },
        { label: '心率', value: '2' },
        { label: '血压', value: '3' },
      ],
      components: {
        1: LocationTable,
        2: HeartrateTable,
        3: BloodpressureTable,
      },
    };
  },
};
</script>

<style scoped lang="less">
.smart-bracelet {
  width: 100%;
  height: 100%;
}
</style>
